<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var = "ctx"/>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MMLOO</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/webuploader.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/plugins/image_css/global.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/global.css">

  <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<jsp:include page="../../home/navigator.jsp"></jsp:include>

      <div class="container" style="width:1200px;height:600px;color:#66afe9">

        <div class="main-content" >
            <form name="goods" class="form-horizontal"  action="${pageContext.request.contextPath}/manage/goods/add" method="post">
              <div align="left" style="width: 600px; margin-right: auto; margin-left: auto;">
                <div class="form-group">
                  <label for="number" class="col-sm-2 control-label"><span style="color:red;">*</span>商品编号</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="number" name="number" value="${goods.number}" readonly>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>商品名称</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" name="name" id="name" value="${goods.name}"
                           required>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>商品详情</label>
                  <div class="col-sm-10">
                    <textarea  class="form-control " name="description" id="description" value="${goods.description}"
                               required></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>简介</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" name="brief" id="brief" value="${goods.brief}" required>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>类别</label>
                  <div id="category" class="col-sm-10">
                    <select id="category_id" name="category_id" >
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>属性</label>
                  <div id="attribute" class="col-sm-10">
                    <select name="attribute_id">
                      <option></option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>属性选项</label>
                  <div class="col-sm-10">
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>产地</label>
                  <div id="origin" class="col-sm-10">
                    <select name="origin_id">
                      <option></option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>城市</label>
                  <div id="city" class="col-sm-10">
                    <select name="city_id">
                      <option></option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>品牌</label>
                  <div id="brand" class="col-sm-10">
                    <select name="brand_id">
                      <option></option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>原价</label>
                  <div class="col-sm-10">
                    <input id="price" type="number" class="form-control" name="price" required/>
                  </div>
                </div>

                <div class="form-group">
                  <label  class="col-sm-2 control-label"><span style="color:red;">*</span>销售类型</label>
                  <div class="col-sm-10">
                    <label><input type="checkbox" name="sale_type" value="1">最新</label>
                    <label><input type="checkbox" name="sale_type" value="2">特卖</label>
                    <label><input type="checkbox" name="sale_type" value="3">热卖</label>
                    <label><input type="checkbox" name="sale_type" value="4">推荐</label>
                  </div>
                </div>
                   <%--图片上传--%>
                <div class="form-group">
                  <div id="normal-img-uploader"<%-- class="far-away"--%>>
                      <label>上传商品图片<span class="required">*</span></label>

                      <div id="js-upload-btn-normal">上传图片(仅限.JPG格式，1MB以内)</div>
                      <div class="progress hidden">
                          <div class="progress-bar progress-bar-primary progress-bar-striped active">
                              <span>上传中</span>
                          </div>
                      </div>
                      <div class="image-preview-wrapper hidden">
                          <img src="${ctx}/upload/image/${goods.image_urls}"
                               alt=" 图片暂时无法显示"/>
                      </div>
                  </div>

                  <input type="hidden" name="image_urls" />
                </div>
                  <input type="hidden" name="id" id="id" value="${goods.id}"/>
                <div class="form-group" id="submtDiv">
                  <div class="col-sm-offset-2 col-sm-10">
                    <input type="submit" value="提交" class="btn btn-primary" id="save-img" /> <input type="reset" value="重置"
                                                                                      class="btn btn-default" />
                  </div>
                </div>


            </form>

          </div>
      </div>
</div>
    <script src="${pageContext.request.contextPath}/resources/plugins/jquery-2.0.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/plugins/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/webuploader/webuploader.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/jquery.masonry.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/global.js"></script>
    <script src="${pageContext.request.contextPath}/resources/plugins/image_global/global.js"></script>

    <script type="application/javascript">

      $(document).ready(function () {

          /**
       *  上传图片（使用两个上传器[缩略图和非缩略图]）
       */
      var uploaderWrapperNormal = $("#normal-img-uploader");

      var uploaderNormal = webUploaderImage(
              "#js-upload-btn-normal",
              1 * 1024 * 1024,
              "${pageContext.request.contextPath}/manage/goods/upload",
              "${pageContext.request.contextPath}/images/delete",
              uploaderWrapperNormal.find(".progress"),
              uploaderWrapperNormal.find(".image-preview-wrapper"),
              '${pageContext.request.contextPath}/upload/image/',
              "input[name='image_urls']"
      );

      function handle(evt) {
        if (chosen) {
          if (confirm("修改此选项需要重新上传图片，确定修改？")) {
            $("input[name='image_urls']").val("");
            $(".image-preview-wrapper").addClass("hidden");
          } else {
            evt.stopPropagation();
            evt.preventDefault();
            return;
          }
        }
        chosen = true;
      }


      var submitFlag = false;

      /**
       * 退出页面提示
       */
      window.onbeforeunload = function () {
        if (!submitFlag) {
          return "您确定要退出页面吗？";
        }
      }

      /**
       * 退出页面时删除图片
       */
      window.onunload = function () {
        if (!submitFlag) {
          uploaderNormal.deleteOldFile();
        }
      }

      /**
       * 表单提交前验证
       */
      $("form.form-horizontal").submit(function () {
        if ($("input[name='image_urls']").val() == "") {
          alert("还没上传图片哟！");
          return false;
        } else {
          submitFlag = true;
        }
      });
      });
    </script>
<script>
  $(document).ready(function () {
      alert($("input[name='id']").val());
    evokeMasonryLayout();
      if ($("input[name='id']").val() == "") {
          alert("enter....");
          $.ajax({
              url: '/manage/goods/init',
              type: 'get',
              async: true,
              dataType: "json",
              success: function (data) {

                  $("#number").val(data.number);

                  $("#category select").empty();
                  var app = '\<option>' + "新添加" + '\</option>';
                  $("#category select").append(app);
                  $.each(data.categories, function (idx, obj) {
                      app = '<option value="' + obj.id + '">' + obj.category + '\</option>';
//                      var inp = '<input class="edit_check" type="checkbox" name="permission" value="' + obj.id + '"/>' + '&nbsp;&nbsp;' + obj.per_description;
                      $("#category select").append(app);
                  });


                  $("#origin select").empty();
                  var app = '\<option>' + "新添加" + '\</option>';
                  $("#origin select").append(app);
                  $.each(data.origins, function (idx, obj) {
                      app = '<option value="' + obj.id + '">' + obj.origin + '\</option>';
                      $("#origin select").append(app);
                  });

                  $("#city select").empty();
                  var app = '\<option>' + "新添加" + '\</option>';
                  $("#city select").append(app);
                  $.each(data.cities, function (idx, obj) {
                      app = '<option value="' + obj.id + '">' + obj.city + '\</option>';
                      $("#city select").append(app);
                  });

                  $("#attribute select").empty();
                  var app = '\<option>' + "新添加" + '\</option>';
                  $("#attribute select").append(app);
                  $.each(data.attributes, function (idx, obj) {
                      app = '<option value="' + obj.id + '">' + obj.attribute + '\</option>';
                      $("#attribute select").append(app);
                  });

                  $("#brand select").empty();
                  var app = '\<option>' + "新添加" + '\</option>';
                  $("#brand select").append(app);
                  $.each(data.brands, function (idx, obj) {
                      app = '<option value="' + obj.id + '">' + obj.brand + '\</option>';
                      $("#brand select").append(app);
                  });

              }
          });
      }
  });
</script>
</body>
</html>
